<template>
  <div>
    <div style="margin-bottom: 10px;">
      <n-button text @click="back">
        <template #icon>
          <n-icon>
            <Backicon />
          </n-icon>
        </template>
        返回
      </n-button>
    </div>
    <n-data-table
    :columns="columns"
    :data="commentData"
    :pagination="pagination"
    :bordered="false"
  />
  </div>
</template>

<script setup lang='ts'>
import { ArrowBack as Backicon } from '@vicons/ionicons5'
import type { DataTableColumns } from 'naive-ui'
import {NButton} from 'naive-ui'
import {GetEssayComment, DeleteComment} from '../../api/api'
import { useRoute, useRouter } from "vue-router";
import {onMounted, ref, Ref, h} from 'vue'
const route = useRoute()
const router = useRouter()

type Song = {
  commentContent: string
  commentTime: string
  commentAuthor: string
  commentClicks: string
  commentId: number
}

var commentData:Ref<Song[]> = ref([])

onMounted(() => {
  initComment()
})

const initComment = async () => {
  let res = await GetEssayComment({
    essayId: route.params.id
  })
  if(res.state === "OK"){
    commentData.value = res.data
  }
}

const back = () => {
  router.back()
}

const createColumns = ({
  remove
}: {
  remove: (row:Song) => void,
}): DataTableColumns<Song> => {
  return [
    {
      title: '评论内容',
      key: 'commentContent',
      ellipsis: {
        tooltip: {
          contentStyle: {width:"700px"}
        }
      }
    },
    {
      title: '评论人',
      key: 'commentAuthor',
    },
    {
      title: '点赞数',
      key: 'commentClicks',
    },
    {
      title: '评论时间',
      key: 'commentTime',
    },
    {
      title: "",
      key: 'remove',
      render (row) {
        return h(
          NButton,
          {
            strong: true,
            tertiary: true,
            size: 'small',
            type: 'error',
            onClick: () => remove(row)
          },
          { default: () => '删除评论' }
        )
      }
    },
  ]
}

var columns = createColumns({
  async remove(row:Song) {
    let res = await DeleteComment({
      commentId: row.commentId
    })
    if(res.state === "OK"){
      window.$message.success("删除成功!")
      initComment()
    }
  }
})
  
const pagination:object = {pageSize:10}
  
</script>

<style lang='scss' scoped>
  
</style>